<template>
    <div class="menu-management">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>菜单管理</span>
            <el-button type="primary" @click="handleAddRootMenu">添加根菜单</el-button>
          </div>
        </template>
        
        <!-- 菜单树表格 -->
        <el-table
          :data="menuTreeData"
          row-key="id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          border
          stripe
        >
          <el-table-column prop="menuName" label="菜单名称" width="200" />
          <el-table-column prop="menuCode" label="菜单编码" width="150" />
          <el-table-column prop="url" label="菜单路径" width="200" />
          <el-table-column prop="icon" label="图标" width="120">
            <template #default="{row}">
              <el-icon v-if="row.icon">
                <component :is="row.icon" />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="orderNum" label="排序" width="80" />
          <el-table-column prop="visible" label="状态" width="100">
            <template #default="{row}">
              <el-tag :type="row.visible === 1 ? 'success' : 'danger'">
                {{ row.visible === 1 ? '显示' : '隐藏' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="{row}">
              <el-button size="small" @click="handleAddChild(row)">添加子菜单</el-button>
              <el-button size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <!-- 菜单对话框 -->
      <MenuDialog
        v-model="dialogVisible"
        :menu-data="currentMenu"
        :is-edit="isEdit"
        :parent-menu="parentMenu"
        @confirm="handleDialogConfirm"
      />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import MenuDialog from '@/components/MenuDialog.vue'
  import { getMenuTree, addMenu, updateMenu, deleteMenu } from '@/api/menu'
  
  interface Menu {
    id?: number
    menuCode: string
    menuName: string
    parentId?: number | null
    url: string
    icon?: string
    orderNum: number
    visible: number
    children?: Menu[]
  }
  
  const menuTreeData = ref<Menu[]>([])
  const dialogVisible = ref(false)
  const isEdit = ref(false)
  const currentMenu = ref<Partial<Menu>>({})
  const parentMenu = ref<Menu | null>(null)
  
  // 获取菜单树
  const fetchMenuTree = async () => {
    try {
      const res = await getMenuTree()
      menuTreeData.value = res.data
    } catch (error) {
      ElMessage.error('获取菜单数据失败')
    }
  }
  
  // 添加根菜单
  const handleAddRootMenu = () => {
    currentMenu.value = { 
      parentId: null,
      visible: 1,
      orderNum: 0
    }
    parentMenu.value = null
    isEdit.value = false
    dialogVisible.value = true
  }
  
  // 添加子菜单
  const handleAddChild = (row: Menu) => {
    currentMenu.value = {
      parentId: row.id,
      visible: 1,
      orderNum: 0
    }
    parentMenu.value = row
    isEdit.value = false
    dialogVisible.value = true
  }
  
  // 编辑菜单
  const handleEdit = (row: Menu) => {
    currentMenu.value = { ...row }
    parentMenu.value = null
    isEdit.value = true
    dialogVisible.value = true
  }
  
  // 删除菜单
  const handleDelete = async (row: Menu) => {
    try {
      await ElMessageBox.confirm('确定要删除该菜单吗?', '提示', {
        type: 'warning'
      })
      await deleteMenu(row.id!)
      ElMessage.success('删除成功')
      fetchMenuTree()
    } catch (error) {
      console.log('取消删除')
    }
  }
  
  // 对话框确认
  const handleDialogConfirm = async (menu: Menu) => {
    try {
      if (isEdit.value) {
        await updateMenu(menu)
        ElMessage.success('菜单更新成功')
      } else {
        await addMenu(menu)
        ElMessage.success('菜单添加成功')
      }
      dialogVisible.value = false
      fetchMenuTree()
    } catch (error) {
      console.error('操作失败:', error)
    }
  }
  
  onMounted(() => {
    fetchMenuTree()
  })
  </script>
  
  <style scoped>
  .menu-management {
    padding: 20px;
  }
  </style>